<template>
  <div>
    <h1>商品属性规格</h1>
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="商品编号">
        <a-input placeholder="商品编号" disabled style="width: 300px" v-model="goodsNo"/>
        <a-button type="primary" @click="goodInit">商品初始化</a-button>
      </a-form-item>
      <a-form-item label="商品规格">
        <div><a-button type="primary" @click="showModal" :disabled="addPropDisable">新增规格</a-button></div>
        <a-modal v-model="visible" title="新增规格" :footer="null">
          <a-input v-model="propName" placeholder="规格名称" style="width: 300px" required/><a-button type="primary" @click="propAdd">确认新增</a-button>
        </a-modal>
        <a-card style="width: 800px" v-for="(item, index) in propList" :key="index">
          <div slot="title">{{ item.propName }}</div>
          <a-button slot="extra" type="danger" @click="propDel(item.propNo)">移除规格</a-button>
          <div>
            <a-checkbox v-for="(specItem,specIndex) in item.specList" :key="specIndex" :checked="specItem.checked===1" @change="chkChange(specItem.specNo,specItem.checked)">
              <a-tag>{{ specItem.specName }} <a @click="specDel(specItem.specNo)" style="margin-left:5px;border-left: 1px #dddddd solid">x</a></a-tag>
            </a-checkbox>
          </div>
          <a-row :gutter="20" style="margin-top: 16px">
            <a-col :span="10">
              <a-input placeholder="规格值名称" v-model="item.specName"/>
            </a-col>
            <a-col :span="1">
              <a-button type="primary" @click="specAdd(index)">新增规格值</a-button>
            </a-col>
          </a-row>
        </a-card>
      </a-form-item>
      <a-form-item label="价格与库存">
        <a-row style="background-color: #dddddd" :gutter="10">
          <a-col :span="4" style="text-align: center" v-if="propList.length===0">规格</a-col>
          <a-col :span="4" style="text-align: center" v-for="(item,index) in propList" v-if="propList.length>0 && item.specList.length > 0" :key="index" >
            {{ item.propName }}
          </a-col>
          <a-col :span="4" style="text-align: center">*库存</a-col>
          <a-col :span="4" style="text-align: center">*单价</a-col>
          <a-col :span="4" style="text-align: center">sku编码</a-col>
        </a-row>
        <a-row :gutter="10" v-if="propList.length===0">
          <a-col :span="4" style="text-align: center">规格</a-col>
          <a-col :span="4" style="text-align: center">
            <a-input placeholder="库存"/>
          </a-col>
          <a-col :span="4" style="text-align: center">
            <a-input placeholder="单价"/>
          </a-col>
          <a-col :span="4" style="text-align: center">
            <a-input placeholder="sku"/>
          </a-col>
        </a-row>
        <a-row :gutter="10" v-if="propList.length>0" v-for="(item,index) in skuList" :key="index">
          <a-col :span="4" style="text-align: center" v-if="item.propOneName">{{ item.propOneName }}</a-col>
          <a-col :span="4" style="text-align: center" v-if="item.propTwoName">{{ item.propTwoName }}</a-col>
          <a-col :span="4" style="text-align: center">
            <a-input placeholder="库存" v-model="item.stock"/>
          </a-col>
          <a-col :span="4" style="text-align: center">
            <a-input placeholder="单价" v-model="item.price"/>
          </a-col>
          <a-col :span="4" style="text-align: center">
            <a-input placeholder="sku" v-model="item.sku"/>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { initGoods, addProp, delProp, addSpec, delSpec, checkSpec } from '@/api/goodsProp'
// delProp, addSpec, delSpec, checkSpec, updateSku
export default {
  name: 'AdCombine',
  data () {
    return {
      addPropDisable: false,
      visible: false,
      goodsNo: '',
      propName: '',
      propList: [],
      skuList: []
    }
  },
  methods: {
    goodInit () {
      initGoods({}).then(res => {
        this.goodsNo = res.goodsNo
      })
    },
    showModal () {
      this.visible = true
    },
    propAdd () {
      addProp({
        goodsNo: this.goodsNo,
        propName: this.propName
      }).then(res => {
        this.visible = false
        this.propName = ''
        this.propList = res.propList
        this.skuList = res.skuList
        if (res.propList.length > 1) {
          this.addPropDisable = true
        }
      })
    },
    propDel (propNo) {
      delProp({
        goodsNo: this.goodsNo,
        propNo: propNo
      }).then(res => {
        this.propList = res.propList
        this.skuList = res.skuList
        this.addPropDisable = false
      })
    },
    specDel (specNo) {
      delSpec({
        goodsNo: this.goodsNo,
        specNo: specNo
      }).then(res => {
        this.propList = res.propList
        this.skuList = res.skuList
      })
    },
    specAdd (index) {
      addSpec({
        goodsNo: this.goodsNo,
        propNo: this.propList[index].propNo,
        specName: this.propList[index].specName
      }).then(res => {
        this.propList = res.propList
        this.skuList = res.skuList
      })
      this.propList[index].specName = ''
    },
    chkChange (specNo, checked) {
      if (checked === 1) {
        checked = 0
      } else {
        checked = 1
      }
      checkSpec({
        goodsNo: this.goodsNo,
        specNo: specNo,
        checked: checked
      }).then(res => {
        this.propList = res.propList
        this.skuList = res.skuList
      })
    }
  }
}
</script>

<style scoped>

</style>
